<template>
  <div style="height: 100%">
    <div
      class="m_bottom10"
      v-if="store.state.has_copy_mould && store.state.user_info.isAdmin"
    >
      <el-button type="primary" @click="show_enterprise_box = true"
        >复制到企业</el-button
      >
    </div>
    <div
      class="container_main"
      :style="{
        height:
          store.state.has_copy_mould && store.state.user_info.isAdmin
            ? 'calc(100% - 40px)'
            : '100%',
      }"
    >
      <div>
        <rule_list :rule_type="3"></rule_list>
        <number_list :rule_type="3"></number_list>
      </div>
      <p>=></p>
      <div>
        <require_list :rule_type="3"></require_list>
      </div>
    </div>
    <el-drawer
      v-model="show_enterprise_box"
      direction="rtl"
      size="30%"
      destroy-on-close
      :close-on-click-modal="false"
    >
      <el-form label-width="150px">
        <el-form-item label="请选择企业">
          <el-select
            v-model="select_enterpriseId"
            @change="select_enterprise"
            clearable
          >
            <div v-for="item in enterprise_list" :key="item.id">
              <el-option
                v-if="
                  item.has_copy_mould && item.id != store.state.enterprise_id
                "
                :value="item.id"
                :label="item.name"
              ></el-option>
            </div>
          </el-select>
        </el-form-item>
      </el-form>

      <div class="tr m_top10">
        <el-button
          @click=";(show_enterprise_box = false), (select_enterpriseId = '')"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="submit_select_enterprise"
          :disabled="select_enterpriseId == ''"
          >确定</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import rule_list from './component/rule_list.vue'
import number_list from './component/number_list.vue'
import require_list from './component/require_list.vue'
import { useStore } from 'vuex'
import axios from '@/service/HttpRequest'
import serviceApi from '@/service/api'
import { ElMessage, ElMessageBox } from 'element-plus'
const store = useStore()
const select_enterpriseId = ref('')
const select_enterpriseName = ref()
const select_enterprise = (e) => {
  enterprise_list.value.some((item) => {
    if (item.id == select_enterpriseId.value) {
      select_enterpriseName.value = item.name
    }
    return item.id == select_enterpriseId.value
  })
}
const show_enterprise_box = ref(false)
const enterprise_list = computed(() => {
  return store.state.enterprise_list
})
const submit_select_enterprise = () => {
  ElMessageBox.confirm(
    '确定将该配件编号数据复制到企业 - ' +
      select_enterpriseName.value +
      ', 该企业原有配件编号数据将被覆盖',
    '',
    {
      cancelButtonText: '取消',
      confirmButtonText: '确定',
      closeOnClickModal: false,
      type: 'warning',
    }
  )
    .then(() => {
      axios
        .request({
          url: serviceApi.copy_identifier,
          method: 'post',
          params: { targetEnterpriseId: select_enterpriseId.value, type: 3 },
        })
        .then((res) => {
          console.log(res)
          select_enterpriseId.value = ''
          show_enterprise_box.value = false
          ElMessage.success('操作成功！')
        })
        .catch((err) => {
          ElMessage.error(err)
        })
    })
    .catch(() => {})
}
</script>

<style lang="scss" scoped>
.container_main {
  display: flex;
  align-items: center;
  background-color: #fff;
  > div:first-child {
    width: 48%;
    height: 100%;
  }
  > div:last-child {
    height: 100%;
    width: 49%;
    > div {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
